<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>周边管理</el-breadcrumb-item>
    </el-breadcrumb>
<!--    搜索框-->
    <div class="ok-box-center-right">
      <el-form :inline="true" :model="ok_page" class="user-search">
        <el-form-item label="搜索：">
          <el-input size="small" v-model="ok_page.key" placeholder="请输入景点名字"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
          <el-button size="small" type="primary" icon="el-icon-plus" @click="create">添加</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-table size="small" :data="pagesData.list" highlight-current-row border element-loading-text="拼命加载中" style="width: 100%;">
        <el-table-column prop="title" label="名称">
        </el-table-column>
        <el-table-column prop="businessHours" label="营业时间">
        </el-table-column>
        <el-table-column prop="longitude" label="经度">
        </el-table-column>
        <el-table-column prop="latitude" label="纬度">
        </el-table-column>
        <el-table-column prop="contacts" label="联系人">
        </el-table-column>
        <el-table-column align="center" label="操作" min-width="100">
          <template slot-scope="scope">
            <div class="ok-box-center">
              <el-button size="mini" type="success" @click="view(scope.row)">查看</el-button>
              <el-button size="mini" type="primary" @click="handleEdit(scope.row)">编辑</el-button>
              <el-button size="mini" type="danger" @click="deleteThis(scope.row)">删除</el-button>
            </div>

          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="line-10"></div>
<!--    分页-->
    <div class="block">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="pagesData.current"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="pagesData.pageSize"
          layout="sizes, prev, pager, next"
          :total="pagesData.total">
      </el-pagination>
    </div>
<!--    新建和编辑弹窗-->
    <div>
      <el-dialog :title="title" :visible.sync="editFormVisible" width="50%" @close="closeDialog">
        <el-form label-width="120px" :model="formData" :rules="formDataRules" ref="form" >
          <el-form-item label="景点名称" prop="title">
            <div class="ok-box-left">
              <el-input size="small" v-model="formData.title" placeholder="请输入景点的名称" style="width: 50%;"></el-input>
            </div>
          </el-form-item>
          <el-form-item label="营业时间" prop="businessHours">
            <div class="ok-box-left">
              <el-input size="small" v-model="formData.businessHours" auto-complete="off" placeholder="请输入营业时间" style="width: 50%;"></el-input>
            </div>
          </el-form-item>
          <el-form-item label="联系人" prop="contacts">
            <div class="ok-box-left">
              <el-input size="small" v-model="formData.contacts" auto-complete="off" placeholder="请输入景点的联系人" style="width: 50%;"></el-input>
            </div>
          </el-form-item>
          <el-form-item label="联系电话" prop="telephone">
            <div class="ok-box-left">
              <el-input size="small" v-model="formData.telephone" auto-complete="off" placeholder="请输入联系电话" style="width: 50%;"></el-input>
            </div>
          </el-form-item>
          <el-form-item label="图片" prop="headImage">
            <div class="ok-box-left">
              <el-upload class="avatar-uploader" action="http://localhost:8056/public/upload" :show-file-list="false"
                         :on-success="handleAvatarSuccess">
                <img v-if="formData.headImage" :src="ok.tool.getImg(formData.headImage)" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </div>
          </el-form-item>
          <el-form-item label="经度" prop="longitude">
            <div class="ok-box-left">
              <el-input size="small" v-model="formData.longitude" auto-complete="off" placeholder="请输入经度" style="width: 50%;"></el-input>
            </div>
          </el-form-item>
          <el-form-item label="纬度" prop="latitude">
            <div class="ok-box-left">
              <el-input size="small" v-model="formData.latitude" auto-complete="off" placeholder="请输入纬度" style="width: 50%;"></el-input>
            </div>
          </el-form-item>
          <el-form-item label="地址" prop="address">
            <div class="ok-box-left">
              <el-input size="small" v-model="formData.address" auto-complete="off" placeholder="请输入地址" style="width: 80%;"></el-input>
            </div>
          </el-form-item>
          <el-form-item label="描述" prop="describeInfo">
            <div class="ok-box-left">
              <el-input type="textarea" size="small" v-model="formData.describeInfo" auto-complete="off" placeholder="请输入描述" style="width: 80%;"></el-input>
            </div>
          </el-form-item>
          <el-form-item label="位置">
            <div class="ok-box-left">
              <div id="wrapper" style="width: 90%;height: 300px"></div>
            </div>
          </el-form-item>

        </el-form>
        <div class="ok-box-center">
          <el-button size="small" @click="closeDialog">取消</el-button>
          <el-button size="small" type="primary" :loading="loading" class="title" @click="submitForm('editForm')">保存</el-button>
        </div>
      </el-dialog>
      <el-dialog title="查看" :visible.sync="viewVisible" width="50%" @click="closeThis">
        <AttractionsView :data="viewData" v-if="viewVisible"></AttractionsView>
      </el-dialog>
    </div>


  </div>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import ok from "@/assets/ok"
import api from "@/api/manage"
import AttractionsView from "@/views/manage/attractions/AttractionsView.vue";
import da from "element-ui/src/locale/lang/da";
import Cookies from "js-cookie";
export default {
  components: {AttractionsView},
  computed: {
    da() {
      return da
    },
    ok() {
      return ok
    }
  },
  data(){
    return{
      viewVisible:false,
      loading: false,
      viewData:{},
      ok_page:{
        key:"",
        pageSize:8,
        current:0
      },
      pagesData:{
        list:[],
        pageSize:0,
        current:0,
        total:0
      },
      formData:{
        id:"",
        title:"",
        describeInfo:"",
        address:"",
        longitude:"",
        latitude:"",
        businessHours:"",
        contacts:"",
        telephone:"",
        type_name:"",
        headImage:"",
      },
      title:"编辑",
      editFormVisible:false,
      formDataRules:{
        title:  [
          { required: true, message: '请输景点的名称', trigger: 'blur' },
        ],
        businessHours: [
          { required: true, message: '请输入营业时间', trigger: 'blur' },
        ],
        contacts: [
          {required: true, message: '请输入联系人', trigger: 'blur' }
        ],
        telephone: [
          { required: true, message: '请输入联系电话', trigger: 'blur' },
        ],
        longitude: [
          { required: true, message: '请输入经度', trigger: 'blur' },
        ],
        latitude: [
          { required: true, message: '请输入维度', trigger: 'blur' },
        ],
        address: [
          { required: true, message: '请输入维度', trigger: 'blur' },
        ],
        describeInfo: [
          { required: true, message: '请输入描述', trigger: 'blur' },
        ],
      }
    }
  },
  created() {
    this.getPage();
    this.checkLogin();
  },
  methods:{
    init() {
      let _this = this;
      AMapLoader.load({
        "key": "d244f562a0204c16c559cc1a6b728676",
        "version": "2.0",
        "plugins": ['AMap.AutoComplete', 'AMap.ToolBar', 'AMap.PlaceSearch', 'AMap.CitySearch', 'AMap.Geocoder'],
      }).then((AMap) => {
        let map = new AMap.Map('wrapper', {
          zoom: 13,
          resizeEnable: true
        });
        let lon = this.formData.longitude;
        let lat = this.formData.latitude;

        if (!this.formData.longitude) {
          lon = 114.91096374603269;
          lat = 34.723935015203985;
        }

        let position;
        if (lon != null && lat != null) {
          position = [lon, lat];
          _this.marker = new AMap.Marker({
            position: position,
            offset: new AMap.Pixel(-13, -30),
            draggable: true,
            cursor: 'move',
            raiseOnDrag: true
          });
          map.setCenter(position);
          map.add(_this.marker);
        } else {
          let address;
          if (!this.formData.address) {
            address = this.formData.address;
          } else {
            address = '民权县双塔镇';
          }
          let placeSearch = new AMap.PlaceSearch({city: '全国'});
          placeSearch.search(address, function (status, result) {
            console.log(result.poiList.pois[0].location)
            position = result.poiList.pois[0].location;
            _this.marker = new AMap.Marker({
              position: position,
              offset: new AMap.Pixel(-13, -30),
              draggable: true,
              cursor: 'move',
              raiseOnDrag: true
            });
            map.setCenter(position);
            map.add(_this.marker);
          })
        }
        const mouseup = function (e) {
          _this.formData.longitude = e.lnglat.getLng();
          _this.formData.latitude = e.lnglat.getLat();
          console.info(e.lnglat);
        };
        const moveend = function () {
          _this.formData.longitude = map.getCenter().lng;
          _this.formData.latitude = map.getCenter().lat;
          console.info(map.getCenter());
          _this.marker = new AMap.Marker({
            position: map.getCenter(),
            offset: new AMap.Pixel(-13, -30),
            draggable: true,
            cursor: 'move',
            raiseOnDrag: true
          });
          map.setCenter(map.getCenter());
          map.add(_this.marker);
        };
        const movestart = function () {
          map.remove(_this.marker);
        };
        map.on('mouseup', mouseup);
        map.on('movestart', movestart);
        map.on('moveend', moveend);
      }).catch(e => {
        console.log(e);
      });
    },
    closeThis(){
      this.viewVisible = false;
      this.formData = {}
      this.getPage();
    },
    search(){
      this.getPage();
    },
    getPage(){
      api.getMerchantPage(this.ok_page).then(res =>{
        this.pagesData = res.result;
      })
    },
    create(){
      this.title = "创建"
      this.editFormVisible = true;
      this.init();
    },
    handleEdit(item){
      this.title = "编辑"
      this.formData = item;
      this.editFormVisible = true;
      this.init();
    },
    view(item){
      this.viewData = item;
      this.viewVisible = true
    },
    deleteThis(item){
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        api.deleteMerchant({id:item.id}).then(res =>{
          this.$message({
            message:"删除成功!",
            type:"success"
          });
          this.getPage();
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    },
    callFather(parm) {
      this.ok_page.current = parm.currentPage
      this.ok_page.pageSize = parm.pageSize
      this.getPage();
    },
    handleSizeChange(val){
      this.ok_page.pageSize = val;
      this.getPage();
    },
    handleCurrentChange(val){
      this.ok_page.current = val;
      this.getPage()
    },
    closeDialog(){
      this.formData = {};
      console.log(111111111111)
      this.editFormVisible = false;

    },
    handleAvatarSuccess(res, file) {
      // this.imageUrl = URL.createObjectURL(file.raw);
      this.formData.headImage = res.result;
      console.log(res);
    },
    submitForm(){
      this.$refs.form.validate((valid)=>{
        if (valid){
          if (this.formData.id){
            api.editMerchant(this.formData).then(res =>{
              this.$message({
                message:"编辑成功!",
                type:"success"
              });
              this.closeDialog();
              this.getPage();
              this.formData = {};
            })
          }else{
            api.createMerchant(this.formData).then(res =>{
              this.$message({
                message:"创建成功!",
                type:"success"
              });
              this.closeDialog();
              this.getPage();
              this.formData = {};
            });
          }
        }
      })

    },
    checkLogin(){
      if (!ok.tool.getStatus()){
        this.$router.push("/login")
      }
    }
  }
}
</script>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px !important;
  text-align: center;
}
.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
</style>
